<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">电话配置</div>

			<div class="search_box" style="margin-top: 20px;">
				<el-radio-group v-model="checked" @change="changetel" :disabled="$permissions.indexOf(286)  == -1"
					style="margin-right: 30px;">
					<el-radio :label="1">一代电话</el-radio>
					<el-radio :label="2">二代电话</el-radio>
				</el-radio-group>


				<div class="add_btn sear_btns" @click="openalert('add')"
					v-if="checked == 2 && $permissions.indexOf(284)  != -1">
					<img src="@assets/images/add.png" alt="">
					新增
				</div>
			</div>
			<div class="search_box" style="margin-top: 20px;" v-if="checked == 1">
				<div class="selarchline">
					<div>端口号：</div>
					<el-input v-model="port" placeholder="请输入内容"></el-input>
					<el-button type="primary" @click="setport">保存</el-button>
				</div>
			</div>
			<div class="table-responsive mt-20" v-if="checked">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<!-- <th style="width: 50px;" v-if="$permissions.indexOf(75)  != -1">
							<input type="checkbox" @change="changeall" v-model="choseall" name="all" id="groupa"><label
								for="groupa"></label>
						</th> -->
						<!-- <th style="width: 70px;text-align: center;padding-right: 20px;">序号</th> -->
						<th v-if="checked == 1">设备号</th>
						<th v-if="checked == 1">绑定分组</th>
						<th v-if="checked == 2">电话url</th>
						<th v-if="checked == 2">备注</th>
						<th v-if="checked == 2">系统名</th>
						<th v-if="checked == 2">转接电话</th>
						<th v-if="checked == 2">默认电话</th>
						<th v-if="checked == 2">状态</th>
						<th class="tcent"
							v-if="checked == 2&& ($permissions.indexOf(286)  != -1|| $permissions.indexOf(287)  != -1)">
							操作</th>
					</tr>

					<tr v-for="item,index in list">
						<!-- <td style="width: 50px;" v-if="$permissions.indexOf(75)  != -1">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="chose"
								:id="'group'+item.id"><label :for="'group'+item.id"></label>
						</td> -->
						<td v-if="checked == 1">{{item.devserial}}</td>
						<td v-if="checked == 1">{{item.groupName}}</td>
						<td v-if="checked == 2">{{item.ipPort}}</td>
						<td v-if="checked == 2">{{item.remark}}</td>
						<td v-if="checked == 2">{{item.sysSonName}}</td>
						<td v-if="checked == 2">{{item.spare}}</td>
						<td v-if="checked == 2">{{item.defaultMobile}}</td>
						<td v-if="checked == 2">{{item.status==0?'异常':'正常'}}</td>

						<td class="tcent"
							v-if="checked == 2&& ($permissions.indexOf(286)  != -1|| $permissions.indexOf(287)  != -1)">
							<div class="edit" @click="openalert('bind',index)" style="margin-right: 10px;width:85px" v-if="$permissions.indexOf(286)  != -1">
								绑定子系统</div>
							<div class="check" @click="openalert('tel',index)" style="margin-right: 10px;width:95px" v-if="$permissions.indexOf(286)  != -1">
								设置电话转接</div>
							<div class="del" @click="delopen(index)" style="margin-right: 10px;" v-if="$permissions.indexOf(287)  != -1">删除</div>
							<div class="test" @click="testurl(index)" v-if="$permissions.indexOf(286)  != -1">链接测试</div>
						</td>
					</tr>


				</table>

			</div>

		</div>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确定要删除该二代电话及其绑定的分机号吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>

		<!--新增分组弹窗-->
		<div :class="alert_show?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show?'display: block;z-index:199':''">
			<div class="cent w600" style="justify-content: center;width: 544px;height: 330px;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>二代电话
							<div class="right" @click="alert_show=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont">
							<div class="line">
								<div class="line_title">电话url：</div>
								<input type="text" autocomplete="off" v-model="ipPort"
									placeholder="例:http://服务器IP:80" class="form-control">
							</div>
							<div class="line">
								<div class="line_title">备注：</div>
								<input type="text" autocomplete="off" v-model="remark" class="form-control">
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="sure">确定</div>
							<div class="closebtn" @click="alert_show=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--绑定子系统-->
		<div :class="alert_show2?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show2?'display: block;z-index:199':''">
			<div class="cent w600" style="justify-content: center;width: 544px;height: 330px;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>绑定子系统
							<div class="right" @click="alert_show2=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="height: 120px;">
							<div class="line">
								<div class="line_title">子系统：</div>
								<el-select v-model="sysid" filterable placeholder="请选择">
									<el-option :key="0" label="默认系统" :value="0"></el-option>
									<el-option v-for="item in allsys" :key="item.id" :label="item.name"
										:value="item.id"></el-option>
								</el-select>
							</div>

						</div>
						<div class="buttons">
							<div class="sure" @click="bindsure">确定</div>
							<div class="closebtn" @click="alert_show2=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--设置电话转接-->
		<div :class="alert_show3?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show3?'display: block;z-index:199':''">
			<div class="cent w600" style="justify-content: center;width: 544px;height: 330px;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>电话转接
							<div class="right" @click="alert_show3=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont">
							<div class="line">
								<div class="line_title">转接电话：</div>
								<input type="text" autocomplete="off" v-model="spare" class="form-control">
							</div>
							<div class="line">
								<div class="line_title">默认电话：</div>
								<input type="text" autocomplete="off" v-model="defaultMobile" class="form-control">
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="telsure">确定</div>
							<div class="closebtn" @click="alert_show3=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'

	export default {
		name: "",
		data() {
			return {
				showadd: false,
				showzzc: false,
				bindf: false,
				alert_show: false,
				alert_show2: false,
				alert_show3: false,
				delalert: false,
				choseall:false,
				checked: 1,
				remark: '',
				ipPort: '',
				sysid: '',
				leaderid: '',
				page: 1,
				allsys: [],
				list: [],
				bindlist: [],
				inglen: 0,
				delnum: 0,
				limit: 10,
				num: 1,
				word:'',
				defaultMobile:'',
				spare:'',
				naes:'',
				name:'',
				type:'',
				id:'',
				showloading: false,
				ids:"",
				port:""
			}
		},
		components: {},

		mounted() {
			this.getopen();
			this.getport();
		},

		methods: {
			testurl(i){
				this.showloading = true
				var that = this
				var param={
						id:this.list[i].id
					}
				
				this.$http.post(this.$url + '/phone/two/test', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.showloading = false
							that.$Toast(response.data.msg);
							that.getlist()
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
				
			},
			telsure() {
				this.showloading = true
				var that = this
				var param={
						defaultMobile:this.defaultMobile,
						spare:this.spare,
						id:this.id
					}
				
				this.$http.post(this.$url + '/phone/two/setmobile', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.showloading = false
							that.$Toast(response.data.msg);
							that.alert_show3 = false
							that.getlist()
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
				
			},
			bindsure() {
				this.showloading = true
				var that = this
				var param={
						sysSonId:this.sysid,
						id:this.id
					}
				
				this.$http.post(this.$url + '/phone/two/setSysSon', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.showloading = false
							that.$Toast(response.data.msg);
							that.alert_show2 = false
							that.getlist()
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
				
			},
			getallSysSon() {
				var that = this
				this.$http.post(this.$url + '/moreSys/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.allsys = response.data.data
						// that.sysid = ''
					})
					.catch(function(error) {
						console.log(error)
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			changetel(){
				this.showloading = true
				var that = this
				var param = {
					value :this.checked
				}
				this.$http.post(this.$url + '/telType/update', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.getopen()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			// 打开弹窗
			openalert(type,index){
				this.type=type
				if(type == 'bind'){
					this.getallSysSon()
					this.sysid = this.list[index].sysSonId?this.list[index].sysSonId:''
					this.id=this.list[index].id
					this.alert_show2 = true
				}else if(type == 'tel'){
					this.getallSysSon()
					this.defaultMobile = this.list[index].defaultMobile?this.list[index].defaultMobile:''
					this.spare = this.list[index].spare?this.list[index].spare:''
					this.id=this.list[index].id
					this.alert_show3 = true
				}else{
					if(index !=undefined){
						this.id=this.list[index].id
						this.name=this.list[index].name
						this.remark=this.list[index].remark
					}else{
						this.name=''
						this.remark=''
					}
					this.alert_show=true
				}
				
			
			},
			delopen(i){
				// var ids=''
				var num = 1
				// for (var i = 0; i < this.list.length; i++) {
				// 	if(this.list[i].chosesf==true){
				// 		ids = ids+''+this.list[i].id+','
				// 		num++
				// 	}
				// }
				// this.ids = ids.substring(0,ids.length-1)
				// if(this.ids==''){
				// 	this.$Toast('暂无选中');
				// 	return
				// }
				this.ids = this.list[i].id
				this.sysSonId = this.list[i].sysSonId
				this.delnum = num
				this.delalert=true		
			},
			// 删除
			del(){
				this.delalert=false
				var param = {
					id:this.ids,
					// sysSonId:this.sysSonId,
				}
				var that = this
				this.$http.post(this.$url + '/phone/two/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page=1
						that.getlist()
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			
			// 表单提交
			sure() {
				this.ipPort = this.ipPort.trim()
				if (this.ipPort=='') {
					this.$Toast("请填写IP端口号");
					return
				}
				this.showloading = true
				var that = this
				var param={
						ipPort:this.ipPort,
						remark:this.remark
					}
				
				this.$http.post(this.$url + '/phone/two/add', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.$Toast(response.data.msg);
							that.alert_show = false
							that.getlist()
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
				
			},
			// 点击遮罩层
			close(){
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].static=false
				}
				this.showzzc=false
			},
			setport(){
				this.showloading = true
				var that = this
				var  param = {
						value:this.port?this.port:''
					}
				this.$http.post(this.$url + '/phone/one/uopdatePort', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.getport()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			getport() {
				this.showloading = true
				var that = this
				this.$http.get(this.$url + '/phone/one/selectPort')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.port = response.data.msg
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			getopen() {
				this.showloading = true
				var that = this
				this.$http.get(this.$url + '/telType')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.checked = response.data.data
						that.getlist()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			getlist() {
				this.showloading = true
				var that = this
				if(this.checked == 1){
					this.$http.get(this.$url + '/phone/one/selectList')
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							
							that.list = response.data.data
							that.showloading = false
						})
						.catch(function(error) {
							console.log(error);
							that.$Toast('网络拥堵，刷新一下');
						});
					
				}else{
					this.$http.get(this.$url + '/telType/two/Select')
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							
							that.list = response.data.data
							that.showloading = false
						})
						.catch(function(error) {
							console.log(error);
							that.$Toast('网络拥堵，刷新一下');
						});
				}
				
				
			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.selarchline {
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.selarchline .el-button {
		margin-left: 15px;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 38px;
	}

	.closebtn {
		width: 89px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		font-size: 14px;
		color: #434343;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.sure {
		width: 89px;
		height: 34px;
		line-height: 34px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 14px;
		color: #FFFFFF;
		margin-right: 18px;
		text-align: center;
		cursor: pointer;
	}

	.w600 .modal-body.h100 {
		height: 147px;
	}

	.line textarea {
		height: 75px;
	}

	.line input,
	.line textarea {
		width: 360px;
	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
		width: 70px;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 165px) auto;
	}

	.tcent {
		text-align: center;
	}

	input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="checkbox"]+label {
		width: 16px;
		height: 16px;
		border: 1px solid #c8c8c8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="checkbox"]+label::before {
		content: '';
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	input[type="checkbox"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
		background: #0075ff url(../../assets/images/dui.png) no-repeat;
		background-size: 80% 80%;
		background-position-x: 20%;
		background-position-y: 20%;
	}

	input[type="checkbox"]:checked+label::before {
		background: #0075ff;
	}

	.search_inp {
		width: 356px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}


	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}


	.loading-content {
		position: absolute;
		z-index: 199;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}


	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
